<template>
  <ul class="playlist-items">
    <li
      v-for="(song, index) in playlist"
      :key="song.id"
      class="playlist-item"
      :class="{ active: index === currentIndex }"
      @click="$emit('select-song', index)"
    >
      <div class="playlist-item-index">
        {{ index + 1 }}
      </div>
      <div class="playlist-item-info">
        <div class="playlist-item-title">{{ song.name }}</div>
        <div class="playlist-item-artist">{{ song.artist }}</div>
      </div>
      <div class="playlist-item-duration">
        {{ song.duration }}
      </div>
    </li>
  </ul>
</template>

<script>
export default {
  name: "PlayList",
  props: {
    playlist: {
      type: Array,
      required: true
    },
    currentIndex: {
      type: Number,
      required: true
    }
  },
  emits: ["select-song"]
};
</script>

